<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {% set project_title = config.custom_title | default('Datawrapper'|trans) %}
    <title>{% if title and title != project_title %}{{ title }} | {% endif %}{{ project_title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ page_description }}">
    <meta name="author" content="{% trans "Datawrapper GmbH" %}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- favicon -->
    <link rel="icon" type="image/png" href="/static/img/icon/{{ favicon }}" />

    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/static/img/iconms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <!-- Le stylesi -->
    <link href="{{ config.static_path }}/vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="{{ config.static_path }}/vendor/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
    <link href="{{ config.static_path }}/css/datawrapper.css?v={{ COMMIT_SHA }}" rel="stylesheet" type="text/css">
    <link href="{{ config.static_path }}/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="{{ config.static_path }}/vendor/iconicfont/css/iconmonstr-iconic-font.min.css" rel="stylesheet" type="text/css">

    {# Polyfills for Internet Explorer #}
    <script type="text/javascript">
        if (navigator.userAgent.indexOf('MSIE') !== -1
            || navigator.appVersion.indexOf('Internet Explorer/') > -1
            || navigator.appVersion.indexOf('Trident/7.0') > -1) {
            document.write("<script src=\"/lib/polyfills/ie-11.js\"><\/script>");

            // svg4everybody: Polyfill for SVG External Content (used in @datawrapper/icons)
            document.write("<script src=\"{{ config.static_path }}/vendor/svg4everybody/svg4everybody.min.js\"><\/script>");
            document.write("<script>svg4everybody();<\/script>");
        }
    </script>

    {% if config.custom_css %}<link href="{{ config.static_path }}/custom/{{ config.custom_css }}?v={{ COMMIT_SHA }}" rel="stylesheet">{% endif %}
    {% if config.custom_favicon %}<link href="{{ config.custom_favicon }}" rel="shortcut icon">{% endif %}

    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/requirejs/require.js"></script>
    <script type="text/javascript" charset="utf-8">
        require.config({
            baseUrl: '/static',
            paths: {
                dw: 'js/dw',
                handsontable: 'vendor/hot/handsontable.full.min',
                jquery:       'vendor/jquery/jquery.min',
                queue:        'vendor/queue-async/queue',
                masonry:      'vendor/masonry/masonry.pkgd.min',
                imagesloaded: 'vendor/imagesloaded/imagesloaded.pkgd.min',
                chroma:       'vendor/chroma-js/chroma.min',
                cm:           'vendor/codemirror',
                dayjs:        'vendor/dayjs/dayjs.min',
                d3:           'vendor/d3/d3v4+jetpack.min',
                zxcvbn:       'vendor/zxcvbn/zxcvbn'
            },
            waitSeconds: 0,
            urlArgs: 'v={{ COMMIT_SHA }}'
        });
    </script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/underscore/underscore-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/vendor/cryptojs/hmac-sha256.js"></script>
    {% if dependencies.dayjs %}
    <script type="text/javascript">
    require([
        'dayjs',
        '/static/vendor/dayjs/plugin/advancedFormat.js',
        '/static/vendor/dayjs/plugin/localizedFormat.js',
        '/static/vendor/dayjs/plugin/relativeTime.js'
        {% if locale[:2] != 'en' %},'/static/vendor/dayjs/locales/umd/{{ locale[:2] }}.js'{% endif %}
    ], function(dayjs, advancedFormat, localizedFormat, relativeTime, locale) {
        dayjs.extend(advancedFormat);
        dayjs.extend(localizedFormat);
        dayjs.extend(relativeTime);
        if (locale) dayjs.locale(locale);
    });
    </script>
    {% endif %}
    {# javascript core 2.0 #}
    <script type="text/javascript" charset="utf-8" src="//{{ DW_DOMAIN }}/lib/chart-core/dw-2.0.min.js?v={{ COMMIT_SHA }}"></script>
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/js/dw-backend.js?v={{ COMMIT_SHA }}"></script>

    <script type="text/javascript">
        dw.backend.__chartCacheDomain = '{{ DW_CHART_CACHE_DOMAIN }}';
        dw.backend.__userData = {{ userData | json | raw }};
        dw.backend.__domain = '{{ DW_DOMAIN }}';
        dw.backend.__asset_domain = '{{ ASSET_DOMAIN }}';
        dw.backend.__api_domain = '{{ API_DOMAIN }}';
        dw.backend.__locale = '{{ locale | replace({'_':'-'}) }}';
        dw.backend.__commit_sha = '{{ COMMIT_SHA }}';
        dw.backend.__auth_salt = '{{ DW_AUTH_SALT }}';
        dw.backend.__messages = {{ messages | json | raw }};
        dw.backend.__messages_hash = '{{ messages_hash }}';
        dw.backend.__svelteApps = {};

        if (dw.backend.__userData.length === 0) {
            dw.backend.__userData = {};
        }
        if (window.localStorage && window.localStorage.getItem) {
            // check if message hash is newer
            var oldHash = window.localStorage.getItem('messages_hash');
            var oldMessages = window.localStorage.getItem('messages');

            if (!dw.backend.__messages.core && !oldMessages) {
                // we have a problem, the local storage might have been
                // cleared but the cookie is still set!
                // let's unset the cookie and reload
                document.cookie = 'DW-MESSAGES-HASH=';
                window.location.reload();
            }
            if (dw.backend.__messages_hash !== oldHash && dw.backend.__messages.core) {
                // yes it is, let's store new translations
                window.localStorage.setItem('messages_hash', dw.backend.__messages_hash);
                window.localStorage.setItem('messages', JSON.stringify(dw.backend.__messages));
                // also set cookie so server knows we have stored this version
                window.document.cookie = 'DW-MESSAGES-HASH='+dw.backend.__messages_hash;
            } else if (oldHash && !dw.backend.__messages.core) {
                // restore translation from cache
                dw.backend.__messages = JSON.parse(oldMessages);
            }
        }
    </script>

    {% if page_css %}
    <link href="{{ config.static_path }}/css/{{ page_css }}?v={{ COMMIT_SHA }}" rel="stylesheet">
    {% endif %}

    {% for js in plugin_js %}
    <script type="text/javascript" charset="utf-8" src="{{ config.static_path }}/plugins/{{ js }}"></script>
    {% endfor %}{% for css in plugin_css %}
    <link href="{{ config.static_path }}/plugins/{{ css }}" rel="stylesheet">
    {% endfor %}

    {% if has_hook('page_inline_css') %}
    <style type="text/css">
    {{ hook('page_inline_css') | raw }}
    </style>
    {% endif %}

  </head>


  <body class="dw {{ pageClass }} {{ language }}" data-locale="{{ locale }}">
    <script type="text/javascript">
        if (window.top != window.self) {
            document.body.classList.add('cms-mode')
        }
    </script>

    {% if maintenance == true %}
        <div style="height:100%; width:100%; z-index:10000; position: absolute; top:0;left:0; background:#fff; text-align:center;">
          <div style="width:620px; display:inline-block; margin-top:100px;">
              {#
              <h1>Datawrapper is undergoing some maintanance</h1>
              <h2>We'll be right back. (Your charts are unaffected by this, they always stay online.)</h2>
              #}
              <h1>We apologize for the inconvenience!</h1>
              <h2>We're moving our database to a faster server.<br>Datawrapper will be back around 2.30 am (CEST).<br>Your charts are unaffected by this, they always stay online.</h2>
              <p>You can check our <a href="https://twitter.com/datawrapper">Twitter account</a> for status updates</p>
          </div>
        </div>
    {% else %}

    {% if alertMessage %}
        <div class="dw-alert-message {% if alertClass %}dw-alert-{{ alertClass }}{% endif %}">
            {{ alertMessage | raw }}
        </div>
    {% endif %}

    {% if not noHeader %}

    <header class="header">
      {% use "login.twig" %}
      {{ block('login') }}

      {% use "header.twig" %}
      {{ block('header') }}
    </header>

    {% endif %}

    <div class="{% if containerClass %}{{containerClass}}{% else %}container{% endif %}">



    <!--[if lt IE 9]>
    <div style="position:relative">
        <div id="disclaimer" class="alert alert-warning span8 offset2" style="font-size:14px;line-height:22px" style="color:#821">
            <h3>{% trans "Your browser is not supported" %}</h3>
            <p>{% trans "You are using a browser that is not supported at the moment. Please use one of the following browsers instead. Note that this only applies to the chart editor. The charts itself can be viewed with any major browser." %}</p>

            <div style="text-align:center">
                <a href="http://mozilla.org/firefox/" title="Firefox" class="browser firefox"></a>
                <a href="http://google.com/chrome" title="Chrome" class="browser chrome"></a>
                <a href="http://www.opera.com/" title="Opera" class="browser opera"></a>
                <a href="http://www.apple.com/safari/" title="Safari" class="browser safari"></a>
                <a href="http://windows.microsoft.com/en-US/internet-explorer/help/ie-9/9-reasons-to-get-internet-explorer-9" title="Internet Explorer 9.0" class="browser msie"></a>
            </div>
        </div>
    </div>
    <![endif]-->


      {{ block('content') }}


    {% if not noFooter %}
      <footer class="footer">

        <p class="pull-right" style="text-align:right">
          <a href="#top">{% trans "Back to top" %}</a>
          <span class="version">version <a href="//www.datawrapper.de/changelog">{{ DW_VERSION }}</a> {{ BRANCH | raw }}</span>
        </p>

        {% if has_hook('get_footer') %}
          {{ hook('get_footer') }}
        {% else %}
          {% include 'footer.twig' %}
        {% endif %}
      </footer>
    {% endif %}

    </div>

    <div id="alertModal" class="modal hide">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="bg">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="light-bulb-18-icon" d="M292.2,381.263h-72.511c-5.082,0-9.201,4.12-9.201,9.203c0,5.082,4.119,9.201,9.201,9.201H292.2
c5.083,0,9.202-4.119,9.202-9.201C301.402,385.383,297.283,381.263,292.2,381.263z M290.546,411.9h-69.201
c-5.082,0-9.201,4.121-9.201,9.202c0,5.083,4.119,9.202,9.201,9.202h69.201c5.082,0,9.201-4.119,9.201-9.202
C299.747,416.021,295.628,411.9,290.546,411.9z M221.82,442.111C239.735,458.673,241.58,462,248.731,462h13.774
c6.99,0,8.714-3.084,27.564-19.889H221.82z M360.699,221.629c0,62.305-53.581,97.22-53.581,146.388h-24.4
c0.021-60.599,53.142-92.516,53.142-146.388c0-100.84-159.828-100.998-159.828,0c0,53.823,52.2,84.366,53.409,146.388h-24.668
c0-49.168-53.581-84.083-53.581-146.388C151.191,87.725,360.699,87.589,360.699,221.629z M269.203,95.112H244.14V50h25.063V95.112z
M355.264,73.97L333.18,62.12l-22.056,41.103l22.085,11.85L355.264,73.97z M419.355,136.042l-14.599-20.372l-40.099,28.739
l14.598,20.371L419.355,136.042z M423.781,294.141l-45.115-18.278l-9.409,23.229l45.116,18.277L423.781,294.141z M438.789,205.555
h-51.125v25.062h51.125V205.555z M200.876,103.223L178.82,62.12l-22.084,11.85l22.055,41.103L200.876,103.223z M147.344,144.409
l-40.101-28.739l-14.599,20.372l40.1,28.738L147.344,144.409z M143.178,296.9L132.9,274.043l-45.116,20.283l10.276,22.857
L143.178,296.9z M124.338,205.555H73.211v25.062h51.127V205.555z"></path> </svg>
        </div>
        <div class="message"></div>
        <div class="buttons">
        </div>
      </div>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script type="text/javascript" src="{{ config.static_path }}/vendor/bootstrap/js/bootstrap.min.js"></script>

    {% use "messages.twig" %}
    {{ block('messages') }}

    {{ hook('core_after_body') }}
    {# For backwards compatibility, we call the following hook as well. In 2.x, this will be gone and only the above one is used. #}
    {{ hook('after_core_body') }}

    {% endif %}
  </body>
</html>
